<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Login</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <!---styles--->
        <link type="text/css" href="/BasketApp/scripts/bootstrap/css/bootstrap_yeti.css" rel="stylesheet">
        <link type="text/css" href="/BasketApp/styles/BasketStyle.css" rel="stylesheet">
        <!----Scripts---->
        <script src="/BasketApp/scripts/jquery-1.10.2.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/bootstrap/js/bootstrap.js" type='text/javascript'></script>
        <script src="/BasketApp/scripts/handlebars-v1.3.0.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/jquery.cookie.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/jsUtil.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function() {
                //handlebars injection
                includes("navbar_template", {}, "#pageNavigation");

                //login success
                function success(username)
                {
                    console.log("good to go");

                    //check if existing cart cookie already exists
                    var username = $("#username").val();
                    var cookieData = $.cookie("cart");
                    cookieData = JSON.parse(cookieData);

                    //cookie does not exists or cookie username != username (override the cookie)
                    if (!cookieData || cookieData.username != username)
                    {                      

                        cookieData = {cart: [], username: username};
                        $.cookie("cart", JSON.stringify(cookieData));
                    }
                    window.location.replace(window.location.href);
                }
                //failed login
                function fail() {
                    console.log("fail");

                    //injects error messages
                    $("#msgPane").fadeOut("fast", function() {
                        includes("errorPane_template", {errorMessage: "Username or Password is incorrect. Please try again."}, "#msgPane");
                    });

                    $("#msgPane").fadeIn("slow");
                }

                $("#submitBtn").click(function() {
                    //TODO:validate
                    var authenticateObj = {username: $("#username").val(), password: $("#password").val(), remember: $("#rememberMe").prop("checked")};
                    $("#submitBtn").ajaxWrapper("../login", success, fail, authenticateObj);
                    //-------------redirect-----------------                                        

                });
            });

        </script>
        <!---Scripts--->

    </head>
    <body>
        <div id="pageNavigation"></div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="row"> 
            <div class="col-lg-6 col-lg-offset-3">
                <div class="well">
                    <form class="bs-example form-horizontal">
                        <fieldset>
                            <legend>Login</legend>
                            <div id="msgPane">

                            </div>
                            <div class="form-group">
                                <label for="Username" class="col-lg-2 control-label">User Name : </label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="username" placeholder="Enter your Username" id="username"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="Password" class="col-lg-2 control-label">Password : </label>
                                <div class="col-lg-8">
                                    <input type="password" placeholder="Enter your password" class="form-control" name="password" id="password"/>
                                    <div class="checkbox">
                                        <input type="checkbox" name="RememberMe" value="checked" id="rememberMe">Remember Me
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-10 col-lg-offset-2">
                                    <button type="button" id="submitBtn" name="button" value="Submit" class="btn btn-primary">Submit</button>&nbsp;&nbsp;
                                    <a href="CustomerRegistration.html">New User? Click here</a><br><br>
                                    <a href="">Forgot your password?</a>
                                </div>
                            </div>

                        </fieldset>
                    </form>

                </div>
            </div>
        </div>
    </body>
</html>
